import {Button, Text, View} from 'react-native';
import {useEffect, useState} from 'react'; // 导入useState钩子

export default function App() {
  const [show, setShow] = useState(false);
  const [num, setNum] = useState(0);
  return (
    <View>
      <Button title="显示" onPress={() => setShow(true)} />
      <Button title="隐藏" onPress={() => setShow(false)} />
      <Button title="增加" onPress={() => setNum(num + 1)} />
      {show && <Child num={num} />}
    </View>
  );
}

function Child({num}: {num: number}) {
  /* 
  useEffect 触发时机
  1 组件创建
  2 组件被卸载
  3 组件更新 

  4 监听状态变化 
   */
  useEffect(() => {
    console.log('1 useEffect');
    return () => {
      // 组件被卸载的时候 触发代码的位置
      console.log('2 useEffect');
    };
  }, [num]); // 当num发生更新  -  先触发2 ，再触发1
  return (
    <View>
      <Text>子组件</Text>
      <Text>{num}</Text>
    </View>
  );
}
